<template>
  <el-card class="box-card author-wrapper">
    <div class="author-top-wrapper">
      <el-avatar :size="46" :src="avatar" />
      <div>
        <div class="author-nickname">{{ nickname }}</div>
        <!-- <div class="accout-age">账号年龄</div> -->
      </div>
    </div>
    <div class="signature-wrapper">{{ signature || '这个人没有写任何个性签名...' }}</div>
    <div class="score-wrapper">
      <ScoreBar name="文章"></ScoreBar>
      <ScoreBar name="粉丝"></ScoreBar>
      <ScoreBar name="点赞"></ScoreBar>
      <ScoreBar name="收藏"></ScoreBar>
    </div>
    <div class="option-wrapper">
      <el-button @click="handleLetter">私信</el-button>
      <el-button @click="handleFollow" type="primary" plain>关注</el-button>
    </div>
  </el-card>
</template>

<script>
import ScoreBar from '@/components/ScoreBar.vue'
export default {
  name: 'AuthorCard',
  components: {
    ScoreBar
  },
  props: {
    avatar: {
      type: String,
      default: ""
    },
    nickname: {
      type: String,
      default: ""
    },
    signature: {
      type: String
    }
  },
  data() {
    return {

    }
  },
  methods: {
    handleLetter(event) {
      event.target.blur()
      if (event.target.nodeName === 'SPAN') {
        event.target.parentNode.blur()
      }
      this.$emit('clickLetter')
    },
    handleFollow(event) {
      event.target.blur()
      if (event.target.nodeName === 'SPAN') {
        event.target.parentNode.blur()
      }
      this.$emit('clickFollow')
    }
  }
}
</script>

<style lang="scss" scoped>
.author-wrapper {
  padding : 8px;

  .author-top-wrapper {
    display : flex;
    flex-direction : row;
    align-items : flex-end;

    .author-nickname {
      margin-left : 12px;
      margin-bottom : 4px;
    }
  }

  .signature-wrapper {
    margin-top : 16px;
    margin-bottom : 10px;
    padding-left : 10px;
    font-size : 12pt;
    color : var(--el-text-color-secondary);
  }

  .score-wrapper {
    display : flex;
    flex-direction : row;
    justify-content : center;
  }

  .option-wrapper {
    display : flex;
    flex-direction : row;
    justify-content : center;
    margin-top : 22px;

    .el-button {
      padding : 0 30px;
    }

    .el-button:not(:first-child) {
      margin-left : 20px;
    }
  }
}

</style>
